<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_商品列表练习</title>
</head>
<body>
    <table  border="1" >
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品库存</th>
        </tr>
    </table>
    <script>
        //下面数组模拟从后端返回前端的数据
        let productArr=[
            {title:'华为手机',price:5000,stock:100},
            {title:'苹果手机',price:10000,stock:200},
            {title:'小米手机',price:3000,stock:300},
            {title:'OPPO手机',price:2000,stock:400}
        ]

        //获取表格元素
        let tableE=document.querySelector('table');
        for(let i=0;i<productArr.length;i++){
            //创建一行
            let trE=document.createElement('tr');
            //创建列
            let titleTd=document.createElement('td');
            let priceTd=document.createElement('td');
            let stockTd=document.createElement('td');
            //给td设置值
            titleTd.innerText=productArr[i].title;
            priceTd.innerText=productArr[i].price;
            stockTd.innerText=productArr[i].stock;
            //把td放入tr中
            trE.appendChild(titleTd);
            trE.appendChild(priceTd);
            trE.appendChild(stockTd);
            //把tr放入table中
            tableE.appendChild(trE);
        }
    </script>
</body>
</html>